/**
 * 2018/05/09 by xiongisxiong
 * 小部件：图片Swiper
 */
import React, { Component } from 'react'
import { View, Text, Image, StyleSheet } from 'react-native'
import Swiper from 'react-native-swiper'

import { screen, color } from '../utils'


export default class ImageSwiper extends Component {
  constructor (props) {
    super(props);
    this.state = {
      swiperShow: false
    }
  }
  componentDidMount () {
    setTimeout(() => {
      this.setState({
        swiperShow: true
      })
    }, 100)
  }
  render () {
    const { swiperShow } = this.state;
    const { banner } = this.props;
    return (
     <View style={styles.container}>
       {
         swiperShow && banner && banner.length > 0 && (
           <Swiper
              style={styles.wrapper}
              height={screen.width / 3}
              dot={<View style={{backgroundColor: color.white, width: 5,height: 5, borderRadius: 4, margin: 3}}/>}
              activeDot={<View style={{backgroundColor: color.theme,width:8, height:8, borderRadius: 4, margin: 3}} />}
              paginationStyle={{bottom: 0, left: null, right:10}}
              loop
              autoplay
              removeClippedSubviews={false}
           >
             {
               banner.map((item, index) => (
                 <View style={styles.slide} key={index}>
                  <Image resizeMode='stretch' style={styles.image} source={{uri: item.pic + '?param=500y200'}} />
                 </View>
               ))
             }
             {/* <View style={styles.slide}>
                  <Image resizeMode='stretch' style={styles.image} source={require('../imgs/img/slider1.jpg')} />
              </View>
              <View style={styles.slide}>
                  <Image resizeMode='stretch' style={styles.image} source={require('../imgs/img/slider2.jpg')} />
              </View>
              <View style={styles.slide}>
                  <Image resizeMode='stretch' style={styles.image} source={require('../imgs/img/slider3.jpg')} />
              </View>
              <View style={styles.slide}>
                  <Image resizeMode='stretch' style={styles.image} source={require('../imgs/img/slider4.jpg')} />
              </View> */}
           </Swiper>
         )
       }
     </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    height: screen.width / 3,
  },
  wrapper: {
  },
  slide: {
      width: screen.width,
      height: screen.width / 3,
      justifyContent: 'center',
      backgroundColor: 'transparent',
      flex: 1,
  },
  text: {
      color: '#fff',
      fontSize: 30,
      fontWeight: 'bold'
  },
  image: {
      width: screen.width,
      height: screen.width / 3,
  }
})